<!--
 * @Author: ZechariahZheng
 * @Date: 2021-12-28 09:25:32
 * @LastEditors: ZechariahZheng
 * @LastEditTime: 2022-07-01 15:25:00
 * @Description: 意见框
-->
<template>
  <div>
    <div class="dialog-content">
      <!-- 填写意见 -->
      <div>
        <textarea
          v-if="abPermission === 'w' || abPermission === 'b'"
          v-model="option"
          autocomplete="off"
          spellcheck="false"
          placeholder="填写意见位置："
          rows="2"
          class="input"
        >
        </textarea>
        <div v-if="abPermission === 'w' || abPermission === 'b'">
          <div>
            <!-- <a href="javascript:;" :style="style" class="fa fa-plus weui-btn weui-btn_mini weui-btn_primary" @click="showEdit = true" v-show="!showEdit" >常用意见</a> -->
            <!-- <a href="javascript:;" class="fa fa-check weui-btn weui-btn_mini weui-btn_primary" @click="showEdit = false" v-show="showEdit"></a>
        <a href="javascript:;" class="fa fa-close weui-btn weui-btn_mini weui-btn_warn" @click="closeText" v-show="showEdit"></a> -->
            <!-- <divider v-show="showEdit" style="font-size: 14px;">常用语</divider> -->
            <ab-useful-opinion
              ref="optionsBtn"
              @setOpinion="setOpinion"
            ></ab-useful-opinion>
          </div>
        </div>
      </div>
      <!-- 显示签名 -->

      <div>
        <div v-for="(item, index) in datas" :key="index">
          <flexbox >
            <flexbox-item :span="1 / 2">
              <div style="display: flex;align-items: center;">
                <span
                  class="sp_content"
                  v-if="item.opinion && item.opinion != recvOption"
                  v-html="item.opinion || item.newData || item.text"
                  style="white-space: pre-line; word-wrap: break-word;"
                ></span>
                <span class="sp_content" v-else>
                  {{ item.opinion || item.newData || item.text }}</span
                >
              </div>
            </flexbox-item>
            <flexbox-item v-if="showImgName.includes(xcName)">
              <img
                v-if="item.opinion && item.opinion != recvOption"
                :src="getOldSignatureUrl(item.signatureUrl)"
                class="signImg"
              />
              <p
                class="tcenter"
                v-if="item.opinion && item.opinion != recvOption"
              >
                {{ timestampToTime(item.approveTime) }}
              </p>
            </flexbox-item>
            <flexbox-item v-else>
              <template>
                <div v-if="item.opinion && item.opinion != recvOption">
                  <p class="tcenter">
                    {{ item.approverName || item.userName }}
                  </p>
                  <p class="tcenter">{{ timestampToTime(item.approveTime) }}</p>
                </div>
                <div v-else>
                  <p class="tcenter">{{ item.userName }}</p>
                  <p class="tcenter">{{ item.time }}</p>
                </div>
              </template>
            </flexbox-item>
          </flexbox>

          <hr color="#e5e5e5" v-if="index + 1 != datas.length" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Icon,
  XDialog,
  XButton,
  Cell,
  TransferDomDirective as TransferDom
} from "vux";

export default {
  name: "xc-opinion",
  directives: {
    TransferDom
  },
  components: {
    XDialog,
    XButton,
    Icon,
    Cell
  },
  props: {
    value: {},
    abPermission: {
      type: String,
      default: "r"
    },
    xcName: {}
  },
  data() {
    return {
      showImgName: [
        // "分管领导意见：",
        // "主要领导意见：",
        // "签发：",
        // "审核：",
        // "审批：",
        // "单位分管领导意见：",
        // "单位主要领导意见：",
        // "领导批示：",
      ],
      datas: "",
      showEdit: false,
      option: "",
      recvOption: "",
      username: "",
      userMsg: { user: {} },
      showDialog: false,
      signatureUrl: "",
      isAgent: false,
      editShow: false
    };
  },
  created() {
    const ua = window.navigator.userAgent.toLocaleLowerCase();
    const isIOS = /iphone|ipad|ipod/.test(ua);
    const isAndroid = /android/.test(ua);
    if (isAndroid) {
      const originHeight =
        document.documentElement.clientHeight || document.body.clientHeight;

      this.resizeHandler = () => {
        const resizeHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        const activeElement = document.activeElement;
        if (resizeHeight < originHeight) {
          // 键盘弹起后逻辑
          if (
            activeElement &&
            (activeElement.tagName === "INPUT" ||
              activeElement.tagName === "TEXTAREA")
          ) {
            setTimeout(() => {
              activeElement.scrollIntoView({ block: "center" }); //焦点元素滚到可视区域的问题
            }, 0);
          }
        }
      };

      window.addEventListener("resize", this.resizeHandler);
    }
    var userMsgJson = localStorage.getItem("userMsg");
    if (userMsgJson) {
      this.userMsg = JSON.parse(userMsgJson);
    }
    if (this.value) {
      this.option = this.value.newData;
      this.datas = JSON.parse(this.value);
    }
    this.username = this.userMsg.user.fullname;
    if (this.userMsg.user.autograph) {
      this.signatureUrl =
        Vue.__ctx +
        "/sys/sysFile/download?fileId=" +
        this.userMsg.user.autograph;
    }
    //判断是否为草稿
    for (var index in this.datas) {
      if ("newData" in this.datas[index]) {
        this.option = this.datas[index].newData;
        this.recvOption = this.datas[index].newData;
      }
    }

    //判断是否为代办
    if (
      this.$route.query.taskId &&
      (this.abPermission === "w" || this.abPermission === "b")
    ) {
      this.baseService
        .postForm(Vue.__ctx + "/bpm/task/getBpmTask", {
          id: this.$route.query.taskId
        })
        .then(data => {
          if (data.code == "200" && data.data.ownerName) {
            this.ownerName = data.data.ownerName;
            this.username = this.username + "[ 代办 " + this.ownerName + " ]";
            this.isAgent = true;
          }
        })
        .catch(error => {
          //   this.$Message.error("系统异常！");
        });
    }
  },
  mounted() {
    this.handlePermission();
    if (this.$refs.optionsBtn) {
      this.$refs.optionsBtn.closeOptionBtn();
    }
  },
  methods: {
    editShowBtn() {
      this.editShow = true;
      // this.option = this.datas[0].option
    },
    closeText() {
      this.option = "";
      this.showEdit = false;
    },
    setOpinion(op) {
      this.option = op;
    },
    handlePermission() {
      if (!this.$vnode.context.$validity) {
        this.$vnode.context.$validity = {};
      }
      if (this.abPermission == "b") {
        if (!this.option) {
          this.$vnode.context.$validity[this.$attrs.desc] = "必填";
        } else {
          delete this.$vnode.context.$validity[this.$attrs.desc];
        }
      }

      //将意见内容代入提交内容中
      if (!this.$vnode.context.$inputData) {
        this.$vnode.context.$inputData = {};
      }

      if (this.option) {
        this.$vnode.context.$inputData = {};
        let tmp = this.$vnode.context.$inputData;
        this.$set(tmp, "inputData", this.option);
        // tmp["inputData"] = this.option;
      }
    },
    openDialog() {
      this.showDialog = true;
    },
    timestampToTime(cjsj) {
      var date = new Date(cjsj); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D;
    },
    getNowTime() {
      var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D;
    },
    getOldSignatureUrl(signatureUrl) {
      return Vue.__ctx + "/sys/sysFile/download?fileId=" + signatureUrl;
    },
    count(obj) {
      var objType = typeof obj;
      if (objType == "string") {
        return obj.length;
      } else if (objType == "object") {
        var objLen = 0;
        for (var i in obj) {
          if (parseInt(i) >= 0) {
            objLen++;
          }
        }
        return objLen;
      }
      return false;
    }
  },

  watch: {
    option(item1, item2) {
      //
      // this.datas = []

      let tmp = {
        approveTime: "",
        approver: "",
        approverName: "",
        approverOrgId: "",
        opinion: "",
        signatureUrl: "",
        sort: "",
        taskId: "",
        newData: item1
      };
      // this.datas.push(tmp)
      // this.option = this.datas[0].opinion
      this.$set(tmp, "approverName", this.username);
      let sendData;
      this.handlePermission();

      if (!this.datas || (this.datas && this.datas[0].text)) {
        sendData = [];
      } else {
        sendData = JSON.parse(JSON.stringify(this.datas));
      }

      if (this.count(sendData) == 1 && "newData" in sendData[0]) {
        //接收到的元素只有一个且是草稿
        sendData[0].newData = item1;
      } else {
        sendData.push(tmp);
      }
      this.$emit("input", JSON.stringify(sendData));
      //虚拟字段添加发送字段
      if (!this.$vnode.context.$sendData) {
        this.$vnode.context.$sendData = {};
      }
      this.$vnode.context.$sendData = {};
      let tmp1 = this.$vnode.context.$sendData;
      this.$set(tmp1, "sendData", JSON.stringify(sendData));
    }
  }
};
</script>

<style scoped lang="less">
.xc-cell {
  /deep/ .vux-label {
    color: #bbbbbb;
    font-size: 0.45rem;
  }
}
.dialog-content {
  background: #fff;
  .input {
    width: 100%;
    font-size: 0.45rem;
    border-radius: 5px;
    padding-left: 12px;
    margin: 5px 0px;
  }
  .name {
    text-align: right;
    color: black;
    display: flex;
    flex-direction: row-reverse;
    .pName {
      margin-right: 2%;
      // font-size: 0.5rem;
      font-size: 0.45rem;
    }
  }
}
.signImg {
  width: 26vw;
}
.tcenter {
  font-size: 12px;
  color: #666;
  position: relative;
  //left: 4.5rem;
  display: inline-block;
  font-family: "Microsoft YaHei";
}
.sp_content {
  font-size: 14px;
  font-family: "Microsoft YaHei";
  margin: 0px 10px;
}
</style>
